<template>
	<div class="remind">
		<div v-for="(item,index) in remindArr" :key="index">
			<template v-if="item.model===1">
				<div class="report case">
					<div class="title flex a-center j-between">
						<p>事件上报</p>
						<p class="flex a-center">
							{{item.detail.happenTime}}
							<Icon type="md-close" size="24" class="m-l-5 cursor-pointer"
								@click.stop="onClickDeleteItem(item)" />
						</p>
					</div>
					<div class="cont">
						<div class="cont-left flex a-center">
							<img :src="item.detail.pic?getPic(item.detail.pic):caseDefaultImage">
						</div>
						<div class="cont-right">
							<div class="fs-16">{{item.detail.typeName}}</div>
							<div class="fs-16 cont-right-margin">
								<Icon custom="i-icon icon-shangbao" size="14" />
								{{item.detail.authorName}} 上报
							</div>
							<div class="cont-cont-detail-bottom remind-over" style="line-height: 1.2;">
								<Icon type="md-pin" size="16" />
								{{item.detail.address}}
							</div>
							<!-- <div class="fs-16 m-b-5 flex a-center">
								<Icon custom="i-icon icon-weizhi" size="16" />
								<div class="wrap remind-over">
									{{item.detail.address}}
								</div>
							</div> -->
						</div>
					</div>
					<div class="btns">
						<div class="cont-btn" @click.stop="onClickCase(item)">
							处理
						</div>
					</div>
				</div>
			</template>
			<template v-if="item.model===2">
				<div class="map-model alarm" style="text-align: left;">
					<div class="title flex a-center j-between">
						<div class="title-img">
							<div class="title-img-left">
								最新{{item.detail.typeName}}
							</div>
							<div class="title-img-right">
								报警
							</div>
						</div>
						<div class="title-close">
							<Icon type="md-close" size="24" color="#FF3333" class=" cursor-pointer"
								@click.stop="onClickDeleteItem(item)" />
						</div>
					</div>
					<div class="cont">
						<div class="cont-cont flex">
							<img :src="item.detail.pic?getPic(item.detail.pic):alarmDefaultImage">
							<div class="cont-cont-detail">
								<div class="cont-cont-detail-top">{{item.detail.authorName}} {{item.detail.typeName}}
								</div>
								<div class="cont-cont-detail-center">报警时间：{{item.detail.happenTime}}</div>
								<div class="cont-cont-detail-bottom remind-over">
									<Icon type="md-pin" size="16" />
									{{item.detail.address}}
								</div>
								<div style="text-align: right;">
									<div class="cont-cont-detail-btn" @click.stop="onClickAlarm(item)">处理</div>
								</div>

							</div>
						</div>
					</div>
				</div>
			</template>
			<template v-if="item.model===3">
				<div class="map-model violation" style="text-align: left;">
					<div class="title flex a-center j-between">
						<div class="title-img">
							<div class="title-img-left">
								最新{{item.detail.typeName}}
							</div>
							<div class="title-img-right">
								违规
							</div>
						</div>
						<div class="title-close">
							<Icon type="md-close" size="24" color="#ea9624" class=" cursor-pointer"
								@click.stop="onClickDeleteItem(item)" />
						</div>
					</div>
					<div class="cont">
						<div class="cont-cont flex">
							<img :src="item.detail.pic?getPic(item.detail.pic):violationDefaultImage">
							<div class="cont-cont-detail">
								<div class="cont-cont-detail-top">{{item.detail.authorName}} {{item.detail.typeName}}
								</div>
								<div class="cont-cont-detail-center">违规时间：{{item.detail.happenTime}}</div>
								<div class="cont-cont-detail-bottom remind-over">
									<Icon type="md-pin" size="16" />
									{{item.detail.address}}
								</div>
								<div style="text-align: right;">
									<div class="cont-cont-detail-btn" style="background-color: #ea9624;"
										@click.stop="onClickViolation(item)">处理</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</template>
			<template v-if="item.model===7">
				<div class="map-model on-site-inspection" style="text-align: left;">
					<div class="title flex a-center j-between">
						<div class="title-img">
							<div class="title-img-left" style="flex: 3;">
								巡检提醒
							</div>
							<div class="title-img-right" style="flex: 2;padding-left: 12px;">
								提醒
							</div>
						</div>
						<div class="title-close">
							<Icon type="md-close" size="24" color="#F6A127" class=" cursor-pointer"
								@click.stop="onClickDeleteItem(item)" />
						</div>
					</div>
					<div class="cont">
						<div class="cont-count">
							有{{item && item.detail.data ? item.detail.data.length : 0}}条窖井盖巡检提醒
						</div>
						<div>
							<div class="btn cursor-pointer" style="background-color: #F6A127;"
								@click.stop="onClickOnSiteInspection(item)">详情</div>
						</div>
					</div>
				</div>
			</template>
		</div>
		<div class="sos" v-if="sosVisible"></div>
    <ManholeCoverInspectionModal v-model="manholeCoverInspectionVisible"
		                             :item.sync="manholeCoverInspectionItem"></ManholeCoverInspectionModal>
	</div>
</template>

<script>
import {
  mapGetters,
  mapActions
} from 'vuex'
import bus from '@/utils/bus'
import ManholeCoverInspectionModal from '@/components/product/main/new/ManholeCoverInspectionModal';
export default {
  components: {
    ManholeCoverInspectionModal
  },
  data () {
    return {
      remindArr: [],
      // {
      // 	model: 7,
      // 	detail: {
      // 		happenTime: 123,
      // 		pic: '',
      // 		typeName: '456',
      // 		authorName: '789',
      // 		address: '6666'
      // 	}
      // }
      caseDefaultImage: require('../../../../assets/main/remind-case.png'),
      alarmDefaultImage: require('../../../../assets/main/remind-alarm.png'),
      violationDefaultImage: require('../../../../assets/main/remind-violation.png'),
      // 井盖巡检
      manholeCoverInspectionVisible: false,
      manholeCoverInspectionItem: []
    };
  },
  computed: {
    ...mapGetters({
      'remindTime': 'getEventRemindTime',
      'remindNumber': 'getEventRemindNumber',
      // 用户选中的提醒设置
      'remindData': 'getEventRemindData',
    }),
    sosVisible () {
      return this.remindArr.some(item => item.typeName === 'SOS求救')
    }
  },
  mounted () {
    this.init()
  },
  destroyed () {
    bus.$off('eventRemind')
  },
  methods: {
    init () {
      bus.$on('eventRemind', data => {
        this.setRemindArr(data)
      })
    },
    // 设置事件列表
    setRemindArr (data) {
      // 如果data不存在或者提醒设置里没有勾选对应的推送类型，则return
      if (!this.remindData || !this.remindData[data.detail.remindKey] || this.remindData[data.detail.remindKey] === 0) return
      // 判断提醒条数
      if (this.remindNumber === this.remindArr.length) {
        this.onClickDeleteItem(this.remindArr[0])
      }
      this.remindArr.push(data)
      // 增加定时器
      data.timer = setTimeout(() => {
        console.log('这是定时关闭的')
        this.onClickDeleteItem(data)
      }, this.remindTime * 1000);
    },
    // 点击删除
    onClickDeleteItem (data) {
      clearTimeout(data.timer)
      this.remindArr.splice(this.remindArr.findIndex(item => data.id === item.id), 1)
    },
    // 获取图片
    getPic (pic) {
      let picArr = pic.split(',').filter(item => item)
      return picArr[0]
    },
    // 点击处理案件
    onClickCase (item) {
      this.$router.push({
        name: 'patrolCase',
        params: {
          id: item.detail.id,
          author: item.detail.authorName,
          authorId: item.detail.authorId,
          type: item.detail.typeName,
          typeId: item.detail.typeId,
          status: item.detail.status
        }
      })
    },
    // 点击处理报警
    onClickAlarm (item) {
      this.$router.push({
        name: 'runAlarm',
        params: {
          id: item.detail.id,
          author: item.detail.authorName,
          authorId: item.detail.authorId,
          authorType: item.detail.authorType,
          type: item.detail.typeName,
          typeId: item.detail.typeId
        }
      })
    },
    // 点击处理违规
    onClickViolation (item) {
      this.$router.push({
        name: 'workViolations',
        params: {
          id: item.detail.id,
          author: item.detail.authorName,
          authorId: item.detail.authorId,
          authorType: item.detail.authorType,
          type: item.detail.typeName,
          typeId: item.detail.typeId
        }
      })
    },
    // 点击窨井盖巡检详情
    onClickOnSiteInspection (item) {
      this.manholeCoverInspectionVisible = true
      this.manholeCoverInspectionItem = item.detail.data
    },
  },
}
</script>

<style lang='scss' scoped>
	.remind {
		/* width: 400px; */
		position: fixed;
		bottom: 0;
		right: 8px;
		z-index: 900;
		text-align: right;

		.map-model {
			width: 348px;
			height: 229px;

			.title {
				height: 48px;
				font-size: 18px;
				padding: 0 12px 0 20px;
				color: #ffffff;
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
			}

			.cont {
				padding: 20px;
				border-bottom-left-radius: 10px;
				border-bottom-right-radius: 10px;

				.cont-cont {
					margin-bottom: 10px;

					img {
						width: 67px;
						height: 67px;
						border-radius: 6px;
						margin-right: 20px;
					}

					.cont-cont-detail {
						flex: 1;
						font-size: 16px;
						color: #ffffff;
						font-weight: 500;
						line-height: 1;

						.cont-cont-detail-top {}

						.cont-cont-detail-center {
							font-size: 14px;
							color: #ffffff;
							margin: 8px 0 6px;
						}

						.cont-cont-detail-bottom {
							font-size: 14px;
							color: #ffffff;
							line-height: 1.2;
						}

						.cont-cont-detail-btn {
							width: 56px;
							height: 28px;
							background-color: #f65527;
							border-radius: 16px;
							display: inline-flex;
							align-items: center;
							justify-content: center;
							margin-top: 10px;
							cursor: pointer;
						}
					}
				}

				.cont-footer {
					.btn {
						width: 64px;
						height: 30px;
						line-height: 30px;
						text-align: center;
						font-size: 16px;
						border-radius: 16px;
						cursor: pointer;
					}
				}
			}
		}

		// 事件
		.case {
			.title {
				/* background: url(../../../../assets/main/com_bg.png) rgba(25, 30, 36, 0.95); */
			}

			.cont {
				color: #ffffff;

				/* background: rgba(25, 30, 36, 0.95); */
				.cont-footer {
					.btn {
						color: #333333;
						background: #ffffff;
					}
				}
			}
		}

		// 报警
		.alarm {
			width: 348px;
			min-height: 229px;
			border: 2px solid rgba(255, 51, 51, 0.8);
			border-radius: 10px;
			background-color: rgba(25, 30, 36, 0.8);

			.title {
				height: 84px;
				border-bottom: 2px solid rgba(255, 51, 51, 0.5);

				.title-img {
					width: 252px;
					height: 52px;
					font-size: 18px;
					color: #f65527;
					font-weight: 500;
					background: url(../../../../assets/new/new_sos.png) 0 0 no-repeat;
					background-size: 100% 100%;
					display: flex;
					align-items: center;
					padding-bottom: 4px;

					.title-img-left {
						flex: 2;
						text-align: center;
					}

					.title-img-right {
						flex: 1;
					}
				}

				.title-close {
					height: 80%;
				}
			}

			.cont {
				color: #ffffff;

				.cont-footer {
					.btn {
						color: #ffffff;
						background: #ff3333;
					}
				}
			}
		}

		// 违规
		.violation {
			width: 348px;
			min-height: 229px;
			border: 2px solid rgba(234, 150, 36, 0.8);
			border-radius: 10px;
			background-color: rgba(25, 30, 36, 0.8);

			.title {
				height: 84px;
				border-bottom: 2px solid rgba(234, 150, 36, 0.5);

				.title-img {
					width: 252px;
					height: 52px;
					font-size: 18px;
					color: #ea9624;
					font-weight: 500;
					background: url(../../../../assets/new/new_wg.png) 0 0 no-repeat;
					background-size: 100% 100%;
					display: flex;
					align-items: center;
					padding-bottom: 4px;

					.title-img-left {
						flex: 2;
						text-align: center;
					}

					.title-img-right {
						flex: 1;
					}
				}

				.title-close {
					height: 80%;
				}
			}

			.cont {
				color: #ffffff;

				.cont-footer {
					.btn {
						color: #ffffff;
						background: #ff9900;
					}
				}
			}
		}

		// 井盖巡检
		.on-site-inspection {
			width: 348px;
			min-height: 229px;
			border: 2px solid #f6a127;
			border-radius: 10px;
			background-color: rgba(25, 30, 36, 0.8);

			.title {
				height: 84px;
				border-bottom: 2px solid #f6a127;

				.title-img {
					width: 252px;
					height: 52px;
					font-size: 18px;
					color: #f6a127;
					font-weight: 500;
					background: url(../../../../assets/new/onSiteInspection.png) 0 0 no-repeat;
					background-size: 100% 100%;
					display: flex;
					align-items: center;
					padding-bottom: 4px;

					.title-img-left {
						flex: 2;
						text-align: center;
					}

					.title-img-right {
						flex: 1;
					}
				}

				.title-close {
					height: 80%;
				}
			}

			.cont {
				color: #ffffff;
				position: relative;
				height: 130px;

				.cont-count {
					text-align: center;
					font-size: 16px;
					margin-top: 10px;
				}

				.btn {
					position: absolute;
					right: 20px;
					bottom: 10px;
					width: 68px;
					height: 32px;
					background-color: #f65527;
					border-radius: 16px;
					display: inline-flex;
					align-items: center;
					justify-content: center;
					margin-top: 10px;
				}
			}
		}

		.sos {
			width: 100%;
			height: 100%;
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			z-index: 900;
			pointer-events: none;
			animation: blink 0.4s linear infinite alternate;
			-webkit-animation: blink 0.4s linear infinite alternate;
		}

		@-webkit-keyframes blink {
			0% {
				box-shadow: rgba(255, 0, 0, 1) 0px 0px 60px inset;
			}

			100% {
				box-shadow: rgba(255, 0, 0, 0.5) 0px 0px 20px inset;
			}
		}
	}

	.report {
		width: 362px;
		height: 283px;
		background: url(../../../../assets/new/new_report.png) 0 0 no-repeat;
		background-size: 100% 100%;
		text-align: left;
		display: inline-flex;
		flex-direction: column;
		padding-bottom: 20px;
		overflow: hidden;

		.title {
			height: 54px;
			font-size: 16px;
			color: rgba(255, 255, 255, 0.9);
			font-weight: bold;
			line-height: 1;
			margin: 37px 35px 0 60px;
		}

		.cont {
			flex: 1;
			font-size: 16px;
			color: #ffffff;
			line-height: 1;
			display: flex;
			align-items: center;
			margin: 5px 20px 0;

			.cont-left {
				flex: 2;
				display: flex;
				align-items: center;
				justify-content: center;

				img {
					width: 58px;
					height: 58px;
				}
			}

			.cont-right {
				flex: 3;

				.cont-right-margin {
					margin: 10px 0 12px;
				}
			}
		}

		.btns {
			text-align: right;

			.cont-btn {
				height: 32px;
				font-size: 16px;
				color: #ffffff;
				background: rgba(0, 186, 255, 0.35);
				border: 1px solid #00baff;
				line-height: 32px;
				border-radius: 16px;
				padding: 0 15px;
				display: inline-block;
				margin: 0 40px 15px 0;
			}
		}

		.wrap {
			word-wrap: break-word;
			word-break: break-all;
		}
	}

	.remind-over {
		min-height: 32px;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>
